<template>
  <div>
    <h3>劳资是儿子</h3>
    <p>age:{{ age }}</p>
    <button @click="onBtnClick">sayHello</button>
    <p>message from grandpa: {{ message }}</p>
    <p>timestamp from grandpa: {{ timestamp }}</p>
    <!-- <p>dict from app: hello in cantonese {{ dict["hello"] }}</p> -->
    <p>dict from app: hello in cantonese {{ i18n["hello"] }}</p>
    <p>user from grandpa {{ user }}</p>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    age: Number,
    gender: String,
  },

  // 可以来源于任何一个祖代组件
  inject: ["message", "timestamp", "dict"],

  /* 辣鸡 校验个锤子 */
  // inject: {
  //   message: {
  //     from: "message",
  //     default: "default msg",
  //   },

  //   timestamp: {
  //     from: "timestamp",
  //   },

  //   /* 本地属性名 */
  //   i18n: {
  //     from: /* 注入来源名 */ "dict",
  //   },

  //   /* 默认值的异步获取 */
  //   user: {
  //     // 对于非基础类型数据，如果创建开销比较大，或是需要确保每个组件实例
  //     // 需要独立数据的，请使用工厂函数
  //     default: () => ({ name: "John" }),
  //   },
  // },

  emits: ["sayHello"],

  //   setup(props, ctx) {
  setup({ age, gender }, { emit }) {
    // console.log("Son setup: props=", props);
    console.log("Son setup: age=", age);
    console.log("Son setup: gender=", gender);

    // console.log("Son setup: ctx=", ctx);

    const onBtnClick = (e) => {
      console.log("onBtnClick");
      emit("sayHello", "张三疯", "黄四郎");
    };

    return {
      onBtnClick,
    };
  },

  created() {
    console.log("son:this.message=", this.message); // injected value
  },
});
</script>

<style lang="scss" scoped></style>
